body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

.get-main-frame {
    width: 16em;
}

.get-main-frame .bg {
    background-color: #ed5565;
    width: 16em;
    height: 100%;
}

.get-main-frame .content {
    position: absolute;
    top: 0;
}

.get-main-frame .bg-bubble {
    width: 2.5em;
    height: 2.5em;
    border-radius: 1.25em;
    background-color: #ef6675;
    position: absolute;
}

.get-main-frame .header {
    width: 3.3em;
    height: 3.3em;
    border: 0.35em #f0707e solid;
    border-radius: 2em;
    position: absolute;
    left: 6em;
    top: 4.5em;
}.get-main-frame .header img {
     width: 3.3em;
     height: 3.3em;

     border-radius: 2em;
     position: absolute;
 ;
 }

.get-main-frame .name {
    width: 16em;
    text-align: center;
    position: absolute;
    top: 9em;
    color: #ffffff;
}

.get-main-frame .name label {
    font-size: 0.6em;
}

.get-main-frame .blessing {
    width: 14em;
    margin-left: 1em;
    text-align: center;
    position: absolute;
    top: 11em;
    color: #ffffff;
}

.get-main-frame .blessing label {
    font-size: 0.6em;
}

.get-main-frame .box-frame {
    position: absolute;
    top: 320px;
    left: 5.25em;
    width: 5.5em;
    height: 6.5em;
    display: none;

}

.get-main-frame .box-frame-anim {
    -webkit-animation: box-size-scale-keyframe 1.5s ease-in-out infinite;

}

@-webkit-keyframes box-size-scale-keyframe {
    0% {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.2, 1.2);
    }
    100% {
        -webkit-transform: scale(1, 1);
    }
}

.get-main-frame .box-frame .box-lid {
    width: 5.5em;
    height: 3.25em;
    position: absolute;
    z-index: 102;
    top: 0;
}

.get-main-frame .box-frame .box-lid-open-anim {
    -webkit-animation: box-lid-open-keyframe 1.5s ease-out;
}

@-webkit-keyframes box-lid-open-keyframe {
    0% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: -14em;
        opacity: 0;
    }
}

.get-main-frame .box-frame .box-body {
    width: 5.5em;
    height: 5.5em;
    position: absolute;
    z-index: 100;
    top: 1em;
}

.get-main-frame .box-frame .boom {
    width: 0.95em;
    height: 0.9em;
    position: absolute;
    z-index: 101;
    top: 1.3em;
    left: 2.275em;
    -webkit-transform-origin: bottom;
}

.get-main-frame .box-frame .boom-anim {
    -webkit-animation: boom-keyframe 1.5s ease-out;
}

@-webkit-keyframes boom-keyframe {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(15);
        opacity: 0.5;
    }
}

.get-main-frame .hide-anim {
    -webkit-animation: hide-keyframe 1.5s;
}

@keyframes hide-keyframe {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.get-main-frame-hide-anim {
    -webkit-animation: get-main-frame-hide-keyframe 0.5s 1s;
}

@-webkit-keyframes get-main-frame-hide-keyframe {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.get-main-frame .no-gift-frame {
    position: absolute;
    top: 320px;
    left: 1em;
    width: 14em;
    text-align: center;
    color: #98020c;
    display: none;
}

.get-main-frame .no-gift-frame label {
    font-size: 0.6em;
}

@-webkit-media screen and (min-height: 500px) and (max-height: 600px) {
    .get-main-frame .content {
        top: 40px;
    }

    .get-main-frame .box-frame {
        top: 360px;
    }

    .get-main-frame .no-gift-frame {
        top: 400px;
    }
}

@-webkit-media screen and (min-height: 600px) and (max-height: 700px) {
    .get-main-frame .content {
        top: 40px;
    }

    .get-main-frame .box-frame {
        top: 400px;
    }

    .get-main-frame .no-gift-frame {
        top: 440px;
    }
}

@-webkit-media screen and (min-height: 700px) and (max-height: 800px) {
    .get-main-frame .content {
        top: 40px;
    }

    .get-main-frame .box-frame {
        top: 460px;
    }

    .get-main-frame .no-gift-frame {
        top: 500px;
    }
}
